<template>
  <div v-loading="detailsLoading" element-loading-text="数据加载中..." class="page-box ">
    <el-card class="box-card">
      <div class="user-info cenLeft">
        <div style="font-size: 20px;font-weight: bold;" class="userName cenLeft">
          {{query.user_name}}
          <el-divider direction="vertical"></el-divider>
        </div>
        <div class="userName cenLeft">
          自评 {{query.me_score}}分 {{gradeInit(query.me_score).gradeadd}}
        </div>
      </div>
      <div class="dept-info">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>{{query.dept_list}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="dept-info">
        提交时间：
        {{query.create_time}}
      </div>
    </el-card>

    <el-divider content-position="left">价值观（占比40%）</el-divider>
    <el-card v-for="(item,index) of senseOfWorth" :key="index" class="marginTopBotom" :body-style="{ padding: '0px' }">
      <div style="padding: 14px;">
        <div> {{item.question_name}} (占比{{item.rare}}%)</div>
        <el-input class="textareaBorderNone" style="font-size:14px;margin-top:6px;" readonly type="textarea" :autosize="{ minRows: 1, }" placeholder="" v-model="item.task"> </el-input>
        <div v-for="(markListItem,markListIndex) of item.markList" :key="markListIndex" class="bottom clearfix">
          <el-divider content-position="left">{{sureMySelf(markListItem.role_type)}} {{markListItem.user_name}}评价/评分 </el-divider>
          <el-form :model="markListItem" ref="markListItem" label-width="60px">
            <el-form-item label="评价" prop="messge" :rules="{ required: true, message: '评价不能为空' }">
              <!-- :disabled="!markListItem.readonlyNo" -->
              <el-input v-model.trim="markListItem.messge" type="textarea" :autosize="{ minRows: 2, }"></el-input>
            </el-form-item>
            <el-form-item label="评分" prop="score" :rules="{ required: true, message: '评分不能为空' }">
              <!-- :disabled="!markListItem.readonlyNo" -->
              <el-input-number @change="sumScoreFun()" style=" width: 100%;" v-model="markListItem.score" controls-position="right" :step="10" :min="1" :max="100"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    <el-divider content-position="left">工作绩效（占比60%）</el-divider>
    <el-card v-for="(item,index) of jobPerformance" :key="index+100" class="marginTopBotom" :body-style="{ padding: '0px' }">
      <div style="padding: 14px;">
        <div> {{item.question_name}} (占比{{item.rare}}%)</div>
        <el-input class="textareaBorderNone" style="font-size:14px;margin-top:6px;" readonly type="textarea" :autosize="{ minRows: 1, }" placeholder="" v-model="item.task"> </el-input>
        <div v-for="(markListItem,markListIndex) of item.markList" :key="markListIndex" class="bottom clearfix">
          <el-divider content-position="left">{{sureMySelf(markListItem.role_type)}} {{markListItem.user_name}}评价/评分 </el-divider>
          <el-form :model="markListItem" ref="markListItem" label-width="60px">
            <el-form-item label="评价" prop="messge" :rules="{ required: true, message: '评价不能为空' }">
              <!-- :disabled="!markListItem.readonlyNo"  -->
              <el-input v-model.trim="markListItem.messge" type="textarea" :autosize="{ minRows: 2, }"></el-input>
            </el-form-item>
            <el-form-item label="评分" prop="score" :rules="{ required: true, message: '评分不能为空' }">
              <!-- :disabled="!markListItem.readonlyNo"  -->
              <el-input-number @change="sumScoreFun()" style=" width: 100%;" v-model="markListItem.score" controls-position="right" :step="10" :min="1" :max="100"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    <el-card v-if="scopePolle.length" class="marginTopBotom" :body-style="{ padding: '0px ', }">
      <div class="cenLeft flex-wrap">
        <el-button style="margin:16px 6px;" v-for="(item,index) in scopePolle" :key="index" plain> {{sureMySelf(item.role_type)}}{{item.user_name}}{{byrole_typeText(item.role_type)}}：{{(item.sunNum).toFixed(2)}}
          <span v-if="item.role_type == '1'">{{gradeInit(item.sunNum).gradeadd}}</span>
        </el-button>
      </div>
    </el-card>

    <el-card class="marginTopBotom" v-if="dataRowDetile.performance_findMessageById&&dataRowDetile.performance_findMessageById.length" :body-style="{ padding: '14px' }">
      <div style="width: 100%;height:auto" v-for="(it,itIndex) of dataRowDetile.performance_findMessageById" :key="itIndex">
        <div class="readme-title"> {{it.name}}备注 </div>
        <el-input disabled style="width: 100%;" type="textarea" :autosize="{ minRows: 2}" placeholder="请输入备注内容" v-model.trim="it.message"> </el-input>
        <el-divider v-if="itIndex<dataRowDetile.performance_findMessageById.length-1"></el-divider>
      </div>
    </el-card>
    <div style="width: 100%;text-align: center">
      <el-button @click="submit()" style="width: 60%;margin:46px 0px;" icon="el-icon-check" type="primary" round>保存</el-button>
    </div>
  </div>
</template>
<script>
import { grade } from "@/components/publicJs/grade.js"; //评分等级
import service from "@/api";
// import performanceAppraisalEditData from "./performanceAppraisalEditData.js";
export default {
  data() {
    return {
      scopePolle: [], //评分人员评分情况
      query: {}, //上一页参数
      detailsLoading: false,
      dataRowDetile: {}, //详情
      senseOfWorth: [], //价值观部分
      jobPerformance: [] //工作绩效部分
    };
  },
  created() {
    this.query = this.$route.query;
    console.log(this.query);
    this.performance_findById(this.query);
  },
  methods: {
    byrole_typeText(role_type) {
      if (role_type == "1") {
        return "总评分";
      } else if (role_type == "2") {
        return "工作绩效评分";
      } else if (role_type == "3") {
        return "价值观评分";
      } else {
        return "评分";
      }
    },
    // 等级初始化
    gradeInit(me_score) {
      return grade(me_score);
    },
    // 确定身份
    sureMySelf(role_type) {
      if (role_type == 1) {
        return "上级领导/";
      } else if (role_type == 2) {
        return "区域领导/";
      } else if (role_type == 3) {
        return "hr/";
      } else {
        return "";
      }
    },
    checkSubmit() {
      let value = {
        isPass: true,
        error: "",
        list: []
      };
      for (let index = 0; index < this.senseOfWorth.length; index++) {
        const element = this.senseOfWorth[index];
        for (let i = 0; i < element.markList.length; i++) {
          if (!element.markList[i].messge) {
            value.isPass = false;
            value.error = `请填写价值观-${element.question_name}-${element.markList[i].user_name}评价`;
          }
          value.list.push({
            id: element.markList[i].id,
            score: element.markList[i].score,
            messge: element.markList[i].messge,
            sourceType: 1 //来源：评分修改传1，非评分修改传2
          });
        }
      }
      for (let index = 0; index < this.jobPerformance.length; index++) {
        const element = this.jobPerformance[index];
        for (let i = 0; i < element.markList.length; i++) {
          if (!element.markList[i].messge) {
            value.isPass = false;
            value.error = `请填写工作绩效-${element.question_name}-${element.markList[i].user_name}评价`;
          }
          value.list.push({
            id: element.markList[i].id,
            score: element.markList[i].score,
            messge: element.markList[i].messge,
            sourceType: 1 //来源：评分修改传1，非评分修改传2
          });
        }
      }
      return new Promise(resolve => {
        resolve(value);
      });
    },
    // 提交信息
    async submit() {
      const { isPass, error, list } = await this.checkSubmit();
      if (!isPass) {
        this.$message.warning(error);
        return;
      }
      const $confirm = await this.$confirm("此操作将进行数据提交");
      if (!$confirm) {
        return;
      }
      console.log("list", list);
      this.detailsLoading = true;
      const { success = false } = await service.performance_editScore({
        list: JSON.stringify(list)
      });
      this.detailsLoading = false;
      if (success) {
        this.$message.success("保存成功");
      }
    },
    async sumScoreFun() {
      let examineList = this.senseOfWorth.concat(this.jobPerformance);
      // console.log("examineList", examineList);
      let surePopleUser_id = []; //确定评分人员id
      for (let i = 0; i < examineList.length; i++) {
        // 确定评分人员id
        const examineListItem = examineList[i];
        if (examineListItem.markList && examineListItem.markList.length) {
          for (
            let index = 0;
            index < examineListItem.markList.length;
            index++
          ) {
            const markListItem = examineListItem.markList[index];
            if (surePopleUser_id.indexOf(markListItem.user_id) == -1) {
              surePopleUser_id.push(markListItem.user_id);
            }
          }
        }
      }
      // console.log("surePopleUser_id", surePopleUser_id);
      // 通过评分人员ID建立都是个对象
      let surePopleUser_idObj = {};
      for (let index = 0; index < surePopleUser_id.length; index++) {
        surePopleUser_idObj[surePopleUser_id[index]] = {
          sunNum: 0, //总分数
          user_id: surePopleUser_id[index],
          user_name: "",
          role_type: ""
        };
      }
      // console.log("surePopleUser_idObj", surePopleUser_idObj);

      // 把数据发给相应对象
      for (let i = 0; i < examineList.length; i++) {
        const examineListItem = examineList[i];
        // console.log("examineListItem", examineListItem);
        if (examineListItem.markList && examineListItem.markList.length) {
          for (
            let index = 0;
            index < examineListItem.markList.length;
            index++
          ) {
            const markListItem = examineListItem.markList[index];
            // console.log("markListItem", markListItem);
            let num =
              (Number(markListItem.score) || 0) *
              (examineListItem.rare / 100).toFixed(4);
            surePopleUser_idObj[markListItem.user_id].sunNum += num;
            surePopleUser_idObj[markListItem.user_id].user_name =
              markListItem.user_name;
            surePopleUser_idObj[markListItem.user_id].role_type =
              markListItem.role_type;
          }
        }
      }
      // console.log(surePopleUser_idObj);

      this.scopePolle = [];
      for (let i = 0; i < surePopleUser_id.length; i++) {
        this.scopePolle.push(surePopleUser_idObj[surePopleUser_id[i]]);
      }
      // console.log("scopePolle", this.scopePolle);
    },
    // 查看详情
    async performance_findById(row) {
      this.detailsLoading = true;
      const { data = {} } = await service.performance_findById({
        id: row.id
      });
      this.detailsLoading = false;
      // const { data = {} } = performanceAppraisalEditData;
      this.dataRowDetile = data;
      // console.log(data);
      if (data.examineList.length) {
        this.senseOfWorth = [];
        this.jobPerformance = [];
        data.examineList.map(item => {
          // console.log(item.markList);
          if (item.question_type == 1) {
            // 价值观部分
            this.senseOfWorth.push(item);
          } else {
            // 工作绩效部分
            this.jobPerformance.push(item);
          }
        });
        this.sumScoreFun();
      }

      const performance_findMessageById = await service.performance_findMessageById(
        {
          id: row.id
        }
      );
      // 增加备注
      this.$set(
        this.dataRowDetile,
        "performance_findMessageById",
        performance_findMessageById.data.rows || []
      );

      // this.showDrawer = true;
    }
  }
};
</script>

<style scoped>
/* == */

.user-info {
  width: 100%;
  height: auto;
  text-align: left;
}
.userName {
  font-size: 18px;
}
.dept-info {
  width: 100%;
  height: auto;
  text-align: left;
  margin-top: 6px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.con-hide {
  height: 36px;
  overflow: hidden;
}
.marginTopBotom {
  margin: 16px 0px;
}
.readme-title {
  text-align: left;
  margin-bottom: 8px;
}
</style>
